<template>
  <div class="logout-container">
    <el-card class="logout-card">
      <el-result
        icon="success"
        title="登出成功"
        sub-title="您已成功登出系统，即将跳转到登录页面..."
      >
        <template #extra>
          <el-icon class="is-loading">
            <Loading />
          </el-icon>
        </template>
      </el-result>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Loading } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()
const logout = () => {
  userStore.doLogout()
  setTimeout(() => {
    router.push('/login')
  }, 500)
}

onMounted(() => {
  logout()
})
</script>

<style scoped>
.logout-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
}

.logout-card {
  width: 400px;
  text-align: center;
}

.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
